<template>
	<view>
		<view class="x-navbar x-navbar-sticky x-navbar-body"
			:style="[`--bg-opacity:${opacity.navbar}`, `padding-top:${PLATFORM.statusBarHeight}px`]">
		</view>
		<view class="p-4" v-if="showTips">
			<!-- #ifdef H5 -->
			<x-alert type="warning" :show="$helper.isWechat() && !USERINFO?.openid"
				@tap.stop="$page.open('/pages/user/account/bind', true)">还未绑定微信，点击立即绑定</x-alert>
			<!-- #endif -->
			<x-alert type="danger" :show="!USERINFO?.mobile"
				@tap.stop="$page.open('/pages/user/account/bind', true)">请完善手机号码</x-alert>
		</view>
		<view class="userinfo-header"
			:style="[`--bg-opacity:${opacity.navbar}`, `--xl-status-bar-height:${PLATFORM.statusBarHeight}px`]">
			<view class="userinfo-header-user" @tap="$page.open('/pages/user/account/info')"
				v-if="UserStore.hasLogin()">
				<image :src="USERINFO?.headimg" mode="scaleToFill" class="userinfo-header-user-image" />
				<view class="flex flex-column grid-gap-2">
					<text class="userinfo-header-user-nickname">{{ USERINFO.nickname }}</text>
					<view class="flex grid-gap-2">
						<view class="x-tag flex flex-center grid-gap-1 border pl-1 pr-2 rounded-round"
							:class="[USERINFO.mobile ? 'border-success-light-7 text-success bg-success-light-9' : 'border-dark-light-7 text-dark-light-7']"
							@tap.stop="$page.open('/pages/user/account/mobile')">
							<uni-icons type="locked-filled"
								:color="USERINFO.mobile ? 'var(--xl-success)' : 'var(--xl-dark-light-7)'"
								size="12"></uni-icons>
							<text class="h10" v-if="USERINFO.mobile">{{ USERINFO.mobile }}</text>
							<text class="h10" v-else>未绑定</text>
						</view>
						<view class="x-tag flex flex-center grid-gap-1 border pl-1 pr-2 rounded-round"
							:class="[USERINFO.is_realname === 1 ? 'border-success-light-7 text-success bg-success-light-9' : 'border-dark-light-7 text-dark-light-7']"
							@tap.stop="$page.open('/pages/user/account/realname')">
							<uni-icons type="auth-filled"
								:color="USERINFO.is_realname === 1 ? 'var(--xl-success)' : 'var(--xl-dark-light-7)'"
								size="12"></uni-icons>
							<text class="h10" v-if="USERINFO.is_realname === 1">已实名</text>
							<text class="h10" v-else-if="USERINFO.is_realname === 0">认证中</text>
							<text class="h10" v-else>未实名</text>
						</view>
					</view>
				</view>
			</view>
			<view class="userinfo-header-user" @tap="login({}, xLoginRef)" v-else>
				<image :src="WEBCONFIG?.default_avatar" mode="scaleToFill" class="userinfo-header-user-image" />
				<view class="flex flex-column">
					<text class="userinfo-header-user-nickname">点击登录</text>
				</view>
			</view>
			<!-- #ifndef H5 -->
			<view class="userinfo-header-icons" @tap="$func.scanCode()">
				<uni-icons type="scan" size="30" color="var(--xl-primary)"></uni-icons>
			</view>
			<!-- #endif -->
			<view class="userinfo-header-icons" @tap="$page.open('/pages/user/account/settings')">
				<image src="/static/icons/settings.png" mode="aspectFit" class="userinfo-header-icons-image"
					style="width: 30px; height: 30px;" />
			</view>
			<!-- #ifdef MP-WEIXIN -->
			<view class="x-mp-weixin-capsule"></view>
			<!-- #endif -->
		</view>
		<view class="p-4 flex flex-column grid-gap-4">
			<view class="grid-columns-8 grid-gap-4">
				<view class="flex flex-column grid-column-2 flex-center grid-gap-1 hover-bg-white-mask rounded-4 py-2"
					@tap="$page.open('/pages/user/collect/technician', true)">
					<text class="font-weight-600">{{ STATICTIS.technician }}</text>
					<text class="h9 text-grey">关注</text>
				</view>
				<view class="flex flex-column grid-column-2 flex-center grid-gap-1 hover-bg-white-mask rounded-4 py-2"
					@tap="$page.open('/pages/user/collect/service', true)">
					<text class="font-weight-600">{{ STATICTIS.service }}</text>
					<text class="h9 text-grey">收藏</text>
				</view>
				<view class="flex flex-column grid-column-2 flex-center grid-gap-1 hover-bg-white-mask rounded-4 py-2"
					@tap="$message.info('积分功能暂未上线~')">
					<text class="font-weight-600">{{ STATICTIS.integral }}</text>
					<text class="h9 text-grey">积分</text>
				</view>
				<view class="flex flex-column grid-column-2 flex-center grid-gap-1 hover-bg-white-mask rounded-4 py-2"
					@tap="$page.open('/pages/user/coupon/list', true)">
					<text class="font-weight-600">{{ STATICTIS.coupon_used }}</text>
					<text class="h9 text-grey">优惠券</text>
				</view>
			</view>
			<view class="flex grid-gap-4">
				<view class="flex-1 user-wallet-bg flex flex-y-flex-end p-4"
					@tap="$page.open('/pages/user/wallet/wallet', true)">
					<x-money :money="STATICTIS.money" type="primary" weight="bold" size="6" :precision="4" />
				</view>
				<view class="flex-1 user-coupon-bg flex flex-y-flex-end p-4"
					@tap="$page.open('/pages/user/coupon/list', true)">
					<x-money :money="STATICTIS.coupon_unuse" type="primary" weight="bold" size="6" unit="张可用"
						:precision="0" />
				</view>
			</view>
			<x-ads v-show="agentShow" position="agent" rounded="12" height="100" v-model:show="agentShow"></x-ads>
			<view class="bg-white rounded-4 p-4 flex flex-column">
				<text class="h8 font-weight-600 text-primary">主要功能</text>
				<view class="flex-1 grid-gap-4 grid-columns-8 py-4">
					<view class="flex flex-column grid-column-2 flex-center grid-gap-2 hover-bg rounded-4 py-2"
						v-for="(item, index) in menuAuth" :key="index" @tap="$page.open(item.page, item.hasLogin)">
						<image :src="item.icon" mode="scaleToFill" style="width: 30px;height: 30px;" />
						<text class="h10 font-weight-500">{{ WebConfigStore.replaceIndustryPersonnelName(item.name)
							}}</text>
					</view>
				</view>
			</view>
		</view>
		<x-tabbar @reload="handleReload"></x-tabbar>
		<x-one-click-alarm ref="XOneClickAlarmRef"/>
		<x-login ref="xLoginRef" @success="handleReload" />
	</view>
</template>

<script setup lang="ts">
import { ref, watch, computed } from 'vue';
import { onLoad, onPageScroll, onShow, onUnload, onShareAppMessage, onShareTimeline } from '@dcloudio/uni-app';
import { usePlatformStore, useWebConfigStore, useUserStore, useRefs } from "@/stores";
import { $helper, $func, $page, $api, $auth, $message, login } from "@/utils";
import { $EventName } from '@/utils/const/env';
const PlatformStore = usePlatformStore();
const { PLATFORM } = useRefs(PlatformStore);
const WebConfigStore = useWebConfigStore();
const { WEBCONFIG } = useRefs(WebConfigStore);
const UserStore = useUserStore();
const { USERINFO, STATICTIS } = useRefs(UserStore);
const xLoginRef = ref();
const opacity = ref<{
	navbar: number | string
	search: number | string
	tab: number | string
}>({
	navbar: 0,
	search: 0,
	tab: 0
});
const agentShow = ref(true);
const menu = ref([
	{ name: '地址管理', icon: '/static/icons/user/location.png', page: '/pages/user/address/list', hasLogin: true },
	{ name: '技师入驻', icon: '/static/icons/user/apply.png', page: '/technician/pages/user/apply', auth: { permission: 'technician_individual_settlement' }, hasLogin: true },
	{ name: '招商加盟', icon: '/static/icons/user/apply-mch.png', page: '/mch/pages/user/apply', hasLogin: true },
	{ name: '申请业务员', icon: '/static/icons/user/salesman.png', page: '/salesman/pages/user/apply', hasLogin: true },
	{ name: '领券中心', icon: '/static/icons/user/coupon.png', page: '/pages/user/coupon/center', hasLogin: true },
	{ name: '投诉建议', icon: '/static/icons/user/appeal.png', page: '/pages/user/feedback/index' },
	{ name: '我的评价', icon: '/static/icons/user/message.png', page: '/pages/user/comment/comment', hasLogin: true },
	{ name: '邀新有礼', icon: '/static/icons/user/gift_box.png', page: '/pages/user/gift/index', hasLogin: true, auth: { permission: 'new_user_gift_state' } },
])
const menuAuth = computed(() => {
	return menu.value.filter((item: any) => {
		if (item.auth) {
			return $auth.auth(item.auth);
		}
		return true;
	})
})
const showTips = computed(() => {
	return UserStore.hasLogin() && (($helper.isWechat() && !USERINFO.value?.openid) || !USERINFO.value?.mobile);
})
const top = ref(0);
watch(() => top.value, (val: number) => {
	if (val < 0) {
		return;
	}
	opacity.value.navbar = val > 50 ? 1 : (val / 50).toFixed(1);
	opacity.value.search = val > (50 + PLATFORM.value.statusBarHeight) ? 1 : (val / (50 + PLATFORM.value.statusBarHeight)).toFixed(1);
})
const handleReload = () => {
	getMyInfo();
	console.log('reload');
}
const hasPermission = () => {
	if ($auth.user('technician')) {
		menu.value[1] = { name: '技师中心', icon: '/static/icons/user/apply.png', hasLogin: true, page: '/technician/pages/index/index' };
	}
	if ($auth.user('agent')) {
		if (!menu.value.find((item: any) => item.page.includes('/agent/pages/index/index'))) {
			menu.value.splice(2, 0, { name: '代理中心', icon: '/static/icons/user/agent.png', hasLogin: true, page: '/agent/pages/index/index' })
		}
	}
	if ($auth.user('channels')) {
		if (!menu.value.find((item: any) => item.page.includes('/channels/pages/index/index'))) {
			menu.value.splice(3, 0, { name: '渠道中心', icon: '/static/icons/user/channels.png', hasLogin: true, page: '/channels/pages/index/index' })
		}
	}
	if ($auth.user('dealer')) {
		if (!menu.value.find((item: any) => item.page.includes('/dealer/pages/index/index'))) {
			menu.value.splice(4, 0, { name: '分销中心', icon: '/static/icons/user/dealer.png', hasLogin: true, page: '/dealer/pages/index/index' })
		}
	}
	if ($auth.user('salesman')) {
		menu.value = menu.value.filter((item: any) => !item.page.includes('/salesman/pages/user/apply'))
		if (!menu.value.find((item: any) => item.page.includes('/salesman/pages/index/index'))) {
			menu.value.splice(4, 0, { name: '业务员中心', icon: '/static/icons/user/salesman.png', hasLogin: true, page: '/salesman/pages/index/index' })
		}
	} else {
		menu.value = menu.value.filter((item: any) => !item.page.includes('/salesman/pages/index/index'))
		if (!menu.value.find((item: any) => item.page.includes('/salesman/pages/user/apply'))) {
			menu.value.push({ name: '申请业务员', icon: '/static/icons/user/salesman.png', page: '/salesman/pages/user/apply', hasLogin: true })
		}
	}
}
const getMyInfo = () => {
	if (UserStore.hasLogin()) {
		$api.User.userinfo(true).then(() => { hasPermission(); }).catch(() => { });
		$api.User.statictis().then(() => { }).catch(() => { });
	}
}
onPageScroll(({ scrollTop }: { scrollTop: number }) => {
	top.value = scrollTop;
})
onLoad(() => {
	uni.$on($EventName.UPDATE_USERINFO, hasPermission);
})
onUnload(() => {
	uni.$off($EventName.UPDATE_USERINFO, hasPermission);
})
const XOneClickAlarmRef = ref<any>();
onShow(()=>{
	XOneClickAlarmRef.value?.getList();
	hasPermission();
	getMyInfo();
	// #ifdef H5
	$helper.replaceUrlParam('appid', $helper.appid());
	// #endif
	if (WEBCONFIG.value?.force_realname && USERINFO.value?.is_realname === 3) {
		uni.showModal({
			title: '提示',
			content: '请先完成实名认证',
			confirmText: '去认证',
			success: (res) => {
				if (res.confirm) {
					$page.open('/pages/user/account/realname')
				}
			}
		})
		return;
	}
})
onShareAppMessage(() => {
	return $page.shareMessage({
		path: `/pages/user/index`
	})
})
onShareTimeline(() => {
	return $page.shareTimeline({
		path: `/pages/user/index`
	})
})
</script>
<style lang="scss">
/* #ifdef H5 */
uni-page[data-page="pages/user/index"] {

	/* #endif */
	page {
		background: radial-gradient(circle at 15% 20%, var(--xl-primary) -100%, transparent 35%),
			radial-gradient(circle at 27% 5%, var(--xl-primary-light-3) -50%, transparent 30%),
			radial-gradient(circle at 85% 17%, var(--xl-primary-light-1) -50%, transparent 25%);
		background-repeat: no-repeat;
		background-position: top center;
		background-color: $uni-bg-color-grey;
		/* #ifdef H5 */
		background-attachment: fixed;
		/* #endif */
	}

	/* #ifdef H5 */
}

/* #endif */
</style>
<style lang="scss" scoped>
.user-wallet-bg {
	height: calc(calc(50vw - 24px) * 0.47);
	background: url('/static/user-wallet-bg.png') no-repeat center center;
	background-size: 100% 100%;
	border-radius: 10px;
	box-sizing: border-box;
}

.user-coupon-bg {
	height: calc(calc(50vw - 24px) * 0.47);
	background: url('/static/user-coupon-bg.png') no-repeat center center;
	background-size: 100% 100%;
	border-radius: 10px;
	box-sizing: border-box;
}
</style>